var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    mode: 'development',
    // mode:'production',
    // 包体的入口文件
    entry: {
        // 使得Angular应用能够运行在大多数的现代浏览器。
        'polyfills': './src/polyfills.ts',
        // 第三方依赖，如Angular、lodash和bootstrap.css。
        'vendor': './src/vendor.ts',
        // 应用代码。
        'app': './src/main.ts'
    },
    resolve: {
        // 自动解析确定的扩展
        extensions: [".tsx", ".ts", ".js", ".json"],
        // 创建 import 或 require 的别名，来确保模块引入变得更简单
        alias: {

        }
    },
    // module是一个对象，里面的rules属性用来决定文件如何加载。
    module: {
        // Rules用来告诉Webpack加载不同文件或模块时该用哪个加载器。 
        rules: [{
                test: /\.ts$/,
                use: [{
                        // 一个用于把TypeScript代码转译成ES5的加载器，它会由tsconfig.json文件提供指导
                        loader: "ts-loader",
                        options: {
                            configFile: helpers.root('src', 'tsconfig.json')
                        }
                    },
                    // 用于加载Angular组件的模板和样式，不加会导致内联的模板和样式没法加载
                    'angular2-template-loader'
                ]
            },
            // import Fuelux
            {
                test: /fuelux\/js\/.*\.js$/,
                use: ['imports-loader?define=>false']
            },
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            {
                test: /\.(png|jpe?g||gif|svg|woff|woff2|ttf|eot|ico)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: 'assets/[name].[hash].[ext]'
                    }
                }]
            },
            {
                test: /.*/,
                include: helpers.root('src', 'assets'),
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                        context: 'assets/'
                    }
                }]
            },
            // 第一个模式是给全局样式使用的
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                        loader: "css-loader",
                        // 如果使用模板CSS，会导致全局css问题不能映射到全局，例如bootstrap
                        options: {
                            // modules: true,
                            sourceMap: false
                        }
                    }]
                })
            },
            // raw加载器,用来加载不用加工的css
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                use: ['raw-loader']
            }
        ]
    },
    // 创建插件的实例。
    plugins: [
        //版权声明
        new webpack.BannerPlugin('王雅琪版权所有'),
        // 替换上下文的插件，用来解决*nix和windows的路径差异
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),
        // app.js包应该只包含应用代码。所有第三方代码都应该放进vendor.js包中。
        // CommonsChunkPlugin插件能完成此工作。
        // CommonsChunkPlugin标记出了三个块之间的等级体系：app -> vendor -> polyfills。
        // 当Webpack发现app与vendor有共享依赖时，就把它们从app中移除。 在vendor和polyfills之间有共享依赖时也同样如此(虽然它们没啥可共享的)。
        // webpack 4不用了
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: ['app', 'vendor', 'polyfills']
        // }),
        // Webpack生成了一些js和css文件。 虽然我们可以手动把它们插入到index.html中，但那样既枯燥又容易出错。
        // Webpack可以通过HtmlWebpackPlugin自动为我们注入那些script和link标签。
        new HtmlWebpackPlugin({
            template: 'src/index.html'
                // , inject: "head"  // 修改script插入的地方   
        }),
        // 暴露全局对象
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
        // new webpack.optimize.OccurrenceOrderPlugin(),
        // new webpack.optimize.UglifyJsPlugin(),
    ],
    // 引用（依赖）外部的库，就是可以从从外部导入的库。
    externals: {

    }
};